<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>我的社区</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!--[if IE 7]>
    <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
    <![endif]-->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/my_v1.css">
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/my.js"></script>
</head>
<body style="background-color: #f8f8f8;">
    <div class="container-fluid">
        <div class="row auction_title">
            <div class="col-xs-2">
                <i class="icon-angle-left icon-3x"></i>
            </div>
            <div class="col-xs-8 pt10 plr0 text-center">
                <span class="fs16">圈子</span>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 ptb10">我的圈子</div>
        </div>
        <div class="row white_bg myCircle">
            <div class="col-xs-12 ptb10 bdb">
	            <div class="col-xs-12 plr0">
	                <div class="col-xs-3 plr0">
	                    <img width="73" src="images/my_pic_02.png" class="img-responsive">
	                </div>
	                <div class="col-xs-7 pr0 pt10">
	                    <p class="fs16">珠宝DIY</p>
	                    <p class="gray fs12"><span>2.1万</span>个话题&nbsp;&nbsp;&nbsp;&nbsp;人气<span>32.6万</span></p>
	                </div>
	                <div class="col-xs-2 plr0 pt20">
                    	<a rel="button" class="btn btn-xs btn-tc">退出</a>
	                </div>
	            </div>
            </div>
            <div class="col-xs-12 ptb10 bdb">
	            <div class="col-xs-12 plr0">
	                <div class="col-xs-3 plr0">
	                    <img width="73" src="images/my_pic_02.png" class="img-responsive">
	                </div>
	                <div class="col-xs-7 pr0 pt10">
	                    <p class="fs16">珠宝DIY</p>
	                    <p class="gray fs12"><span>2.1万</span>个话题&nbsp;&nbsp;&nbsp;&nbsp;人气<span>32.6万</span></p>
	                </div>
	                <div class="col-xs-2 plr0 pt20">
                    	<a rel="button" class="btn btn-xs btn-tc">退出</a>
	                </div>
	            </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 ptb10">推荐的圈子</div>
        </div>
        <div class="row white_bg recommendCircle">
            <div class="col-xs-12 ptb10 bdb">
	            <div class="col-xs-12 plr0">
	                <div class="col-xs-3 plr0">
	                    <img width="73" src="images/my_pic_02.png" class="img-responsive">
	                </div>
	                <div class="col-xs-7 pr0 pt10">
	                    <p class="fs16">珠宝DIY</p>
	                    <p class="gray fs12"><span>2.1万</span>个话题&nbsp;&nbsp;&nbsp;&nbsp;人气<span>32.6万</span></p>
	                </div>
	                <div class="col-xs-2 plr0 pt20">
                    	<a rel="button" class="btn btn-xs btn-add">加入</a>
	                </div>
	            </div>
            </div>
            <div class="col-xs-12 ptb10 bdb">
	            <div class="col-xs-12 plr0">
	                <div class="col-xs-3 plr0">
	                    <img width="73" src="images/my_pic_02.png" class="img-responsive">
	                </div>
	                <div class="col-xs-7 pr0 pt10">
	                    <p class="fs16">珠宝DIY</p>
	                    <p class="gray fs12"><span>2.1万</span>个话题&nbsp;&nbsp;&nbsp;&nbsp;人气<span>32.6万</span></p>
	                </div>
	                <div class="col-xs-2 plr0 pt20">
                    	<a rel="button" class="btn btn-xs btn-add">加入</a>
	                </div>
	            </div>
            </div>
        </div>
    </div>
    <div class="modelAdd">
    	加入成功
    </div>
    <div class="modelTc">
    	退出成功
    </div>
<script>
    $(function(){
        /*加入/退出我的圈子*/
        $(".myCircle a").live("click",function(){
            $(".modelTc").show(300);
            $('.modelTc').delay(1000).hide(300);
            $(this).parent().parent().parent().remove();
        });
        $(".recommendCircle a").on("click",function(){
            $(".modelAdd").show(300);
            $('.modelAdd').delay(1000).hide(300);
            $(this).removeClass("btn-add").addClass("btn-tc").html("退出");
            var recommendCircle = $(this).parent().parent().parent().html();
            $(".myCircle").append("<div class='col-xs-12 ptb10 bdb'>" + recommendCircle + "</div>");
            $(this).parent().parent().parent().remove();
        });
    })
</script>
</body>
</html>